<template>
    <div class="goods-item">
        <div class="goods-img-box flex-center">
            <base-img :src="item.goods_image"></base-img>
        </div>
        <div class="goods-name mt-12 fs-16">
            {{ item.goods_name }}
        </div>
        <div class="goods-desc mt-8 flex-between">
            <div class="goods-price">
                <div class="price-now fs-16">￥<span class="fs-24">{{ item.goods_price_min }}</span></div>
                <div class="price-ago fs-10">￥{{ item.market_price_min }}</div>
            </div>
            <!-- <div class="goods-btn flex-center fs-14">加入购物车</div> -->
        </div>
    </div>
</template>

<script>
export default {
    name: "SmallGoodsItem",
    props: {
        item: Object,
    },
};
</script>

<style lang='scss' scoped>
.goods-item {
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    &:hover{
        outline: 2px solid var(--main-color);
        outline-offset: -2px;
    }

    .goods-img-box {
        width: 186px;
        height: 186px;
        border-radius: 8px;
        overflow: hidden;
        .goods-img {
            width: 100%;
            height: 100%;
        }
    }
    .goods-name {
        width: 100%;
        height: 44px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .goods-desc {
        align-items: center;

        .price-now {
            color: #ff5040;
            span{
                font-family: DIN-BOLD;
            }
        }

        .price-ago {
            color: #999999;
        }

        .goods-btn {
            width: 88px;
            height: 30px;
            background: #ff714b;
            border-radius: 15px 15px 15px 15px;
            color: #ffffff;
        }
    }
}
.mt-8 {
    margin-top: 8px;
}

.mt-9 {
    margin-top: 9px;
}

.mt-12 {
    margin-top: 12px;
}
@media screen and (max-width: 1280px) {
    .goods-item {
        background: #fff;
        border-radius: 8px 8px 0 0;
        padding: 6px;
        .goods-img-box {
            width: 178px;
            height: 178px;
            border-radius: 8px;
            overflow: hidden;
            .goods-img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>